<template>
	<view style="background-color: #f3f4f9;">
		<view class="lz-status_bar" style="background-color: #1a1f35;color: #ffffff;">
		    <view class="lz-top_view"></view>
		</view> 
		<view class="kaoshi-head" style="background-color: #1a1f35;color: #ffffff;">
		    <view class="kaoshi-head-top">
		        <view class="kaoshi-head-left" @tap="$navigateBack">
		            <view class="iconfont icon-zuojiantou"></view>
		        </view>
		        <view class="kaoshi-head-m">了解系统班</view>
		    </view>
		</view>
		<view class="bg">
			<image class="bg-img" src="/static/vip/bg.png" mode=""></image>
		</view>
	
		<view class="info" >
			
			<view style="width: 100%;text-align:center;margin: auto;color: gainsboro;font-size: 23rpx;margin-top: 20rpx;">
				----成为学院，您将专享以下专属特权----
			</view>
			<view class="privilege">
				<view class="privilege-item" v-for="(item, index) in privilegeList" :key="index" hover-class="hover" @click="privilegeClick(index)">
					<image class="privilege-item-pic" :src="item.pic" mode=""></image>
					<text class="privilege-item-text">{{ item.text }}</text>
					<text class="privilege-item-info">{{ item.info }}</text>
				</view>
			</view>
		</view>
		
		<view style="background-color: #ffffff;">
			<uni-section title="联系我们" type="line">
				<view style="display: flex;flex-flow: column wrap;">
					
					<img :show-menu-by-longpress="true"
							@click="previewImage" 
							class="code-img" 
							src="http://shuati26.kptedu.com/uploads/image/qrcode.jpg"></img>
					
					<view class="code-bom">
						点击获取学管师二维码
					</view>
					<view class="wxcode">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<image style="width: 30rpx ;height: 30rpx ;border-radius:50px ;margin-right: 10rpx;" src="../../../static/img/pay1.jpg"></image>
							<text style="color: #9c9c9c;">添加学管师微信：</text>
						</view>
						<text>{{wxcode}}</text>
						
						<text @click="copy(wxcode)">点击复制</text>
					</view>
					
					<text class="qr-bom">
						打开微信——粘贴复制——添加好友
					</text>
				</view>
			</uni-section>
			
			
			
		</view>
	</view>
</template>

<script>
	const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
	export default {
		data() {
			return {
				statusBarHeight,
				setCode:'',
				classes: '',
				chooseSubject:0,
				chooseUnit:0,
				dataTree: [],
				privilegeList: [
					{
						pic: '/static/vip/coin.png',
						text: '阶段测评',
						info:'定期进行阶段测评'
					},
					{
						pic: '/static/vip/quan.png',
						text: '答疑服务',
						info:'1对1进行答疑'
					},
					{
						pic: '/static/vip/red-bag.png',
						text: '专属学管师',
						info:'专属学管师督促学习'
					},
					{
						pic: '/static/vip/goods.png',
						text: '刷题无限制',
						info:'不限量刷题'
					},
					{
						pic: '/static/vip/speed.png',
						text: '学员题库',
						info:'享专属题库'
					},
					{
						pic: '/static/vip/share.png',
						text: '学员模考',
						info:'定期组卷模考'
					},
					{
						pic: '/static/vip/active.png',
						text: '考前密卷',
						info:'对应直播课'
					},
					{
						pic: '/static/vip/birthday.png',
						text: '专属课程',
						info:'独家课程学习'
					},
					{
						pic: '/static/vip/birthday.png',
						text: '学员专享价',
						info:'付费题库享优惠'
					}
					
				],
				wxcode:'GongXue-kefu',
			}
		},
		onShow() {
			this.get_unitActivate_list();
		},
		methods: {
			onchange(e) {
				const value = e.detail.value
				this.chooseSubject = value[0]['value']
				this.chooseUnit = value[1]['value']
			},
			back() {			
				    let pages = getCurrentPages(); // 当前页面
				    let beforePage = pages[pages.length - 2]; // 前一个页面
				     uni.navigateBack({
				     delta: 1,
				     success: function() {
				      beforePage.$vm.initData(); // 执行前一个页面的刷新 （initData是我自己定义的方法）
				     }
				    });
				
				   
				uni.showToast({
					
					icon: "none",
					title: "返回"
				})
			},
			onInput(e) {
						   console.log(e,'code')
						   this.setCode=e.detail.value
			},
			async get_unitActivate_list() {
				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.unitActivateList,
					data: {
						province: uni.getStorageSync('choose_cityName')
					},
				});
				if (res.code === 1) {
					this.dataTree = res.data.data
				}
			},
			
			privilegeClick(index) {
				uni.showToast({
					icon: "none",
					title: `点击了「${this.privilegeList[index].text}」`
				})
			},
			copy(value){
				uni.setClipboardData({
					data:value,
					success:function(){
						uni.showToast({
						     title: '复制成功'
						    })
					}
				})
			},
			previewImage(e){
			        uni.previewImage({
			            // 需要预览的图片链接列表。若无需预览，可以注释urls
			            urls: [e.target.src],
			            // 为当前显示图片的链接/索引值
			            current: e.target.src,
			            // 图片指示器样式 
			            indicator:'default',
			            // 是否可循环预览
			            loop:false,
			            // 长按图片显示操作菜单，如不填默认为保存相册
			   longPressActions:{
			    itemList:[this.l('发送给朋友'),this.l]
			   },
			   success: res => {
			    console.log('previewImage res', res);
			   }, 
			   fail: err => {
			    console.log('previewImage err', err);
			   }
			  });
			},
		}
	}
</script>

<style lang="scss">
	.recharge-tagf{
		position: absolute;
		top: -2rpx;
		left: -2rpx;
		background-image: url('../../../static/vip/tag.png');
		background-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 37rpx;
		
		
	}
	
	
	
	.main-title {
		padding: 30rpx 30rpx;
		font-size: 34rpx;
		color: #1C1C1C;
	}
	
	.tip {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #A5A3A2;
	}
	
	.rmb {
		font-size: 26rpx;
		color: #E3BE83;
	}
	
	.bg {
		position: absolute;
		top: 85px;
		left: 0;
		right: 0;
		height: 200rpx;
		z-index: 9;
		
		&-img {
			width: 100%;
			height: 100%;
			border-bottom-right-radius: 15px;
		}
	}
	
	.hover {
		opacity: 0.7;
	}
	
	.nav {
		position: fixed;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		height: 44px;
		padding: 0 30rpx;
		background-image: url('~@/static/vip/nav-bg.png');
		background-size: 100%;
		z-index: 99;
		
		&-back {
			width: 20rpx;
			height: 40rpx;
		}
		
		&-title {
			color: #FFFFFF;
			font-size: 42rpx;
		}
		
		&-space {
			width: 70rpx;
			height: 40rpx;
		}
	}
	
	.info {
		position: relative;
		    width: 93%;
		    
		    background-color: #FFFFFF;
		    margin: 85px auto 20rpx;
		    border-radius: 10px;
		    z-index: 99;
			padding-top: 50rpx;
			margin-top: 130px;
		&-bg {
			position: absolute;
			width: 730rpx;
			height: 360rpx;
			z-index: -1;
		}
		
		&-content {
			padding: 70rpx 50rpx 0 50rpx;
			margin-bottom: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		
		&-avatar {
			margin-right: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 85rpx;
			height: 85rpx;
			background-color: #fff;
			padding: 1rpx;
			border-radius: 50%;
			
			&-pic {
				width: 83rpx;
				height: 83rpx;
			}
		}
		
		&-name {
			display: flex;
			flex-direction: column;
			color: #FFFFFF;
			font-size: 35rpx;
		}
		
		&-level {
			margin-top: 15rpx;
			font-size: 24rpx;
		}
		
		&-asset {
			padding: 0 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			
			&-item {
				display: flex;
				flex-direction: column;
			}
		}
	}
	
	.iai {
		&-title {
			margin-bottom: 20rpx;
			margin-right: 100rpx;
			font-size: 24rpx;
			color: #CFB386;
		}
		
		&-value {
			font-size: 35rpx;
			color: #FFFFFF;
		}
	}
	
	.recharge {
		position: relative;
		margin-bottom: 35rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		
		&-tag {
			position: absolute;
			top: -2rpx;
			left: -2rpx;
			width: 170rpx;
			height: 36rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background-image: url('~@/static/vip/tag.png');
			background-size: 100%;
			
			&-text {
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
		
		&-item {
			position: relative;
			padding: 40rpx 0;
			margin-left: 15rpx;
			width: 200rpx;
			height: 230rpx;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			border: solid 2rpx #F2F2F3;
			border-radius: 12rpx;
			
			&-active {
				border-color: #EDD2A9;
				background-color: #FBF1E5;
			}
			
			&-duration {
				margin-bottom: 30rpx;
				font-size: 26rpx;
				color: #1C1C1C;
			}
			
			&-price {
				margin-bottom: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: baseline;
				
				&-text {
					font-size: 48rpx;
					color: #E3BE83;
				}
			}
			
			&-des {
				font-size: 22rpx;
				color: #A5A3A2;
			}
		}
	}
	
	.button {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 85rpx;
		border-radius: 50rpx;
		background-image: linear-gradient(#EFCF9E, #E4BF85);
		
		&-text {
			font-size: 30rpx;
			color: #1C1C1C;
		}
	}
	
	.update {
		margin: 35rpx 30rpx 20rpx 30rpx;
	}
	
	.privilege {
		padding: 0 30rpx;
		margin-bottom: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
		
		&-item {
			margin: 0 23rpx;
			margin-bottom: 25rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			&-pic {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}
			
			&-text {
				font-size: 24rpx;
				color: #383738;
			}
			&-text {
				font-size: 20rpx;
				color: #9c9c9c;
			}
		}
	}
	
	.level {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		height: 466rpx;
		background-image: url('~@/static/vip/vip-bg.png');
		background-size: 100%;
		
		&-rate {
			position: absolute;
			top: 43rpx;
			left: 33rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			
			&-text1 {
				margin-right: 20rpx;
				color: #1C1C1C;
				font-size: 34rpx;
			}
			
			&-text2 {
				font-size: 34rpx;
				color: #C07C07;
			}
		}
		
		&-info {
			// position: absolute;
			// top: 188rpx;
			// left: 350rpx;
			margin-top: 70rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			&-icon {
				margin-bottom: 20rpx;
				width: 48rpx;
				height: 38rpx;
			}
			
			&-text {
				margin-bottom: 20rpx;
				font-size: 26rpx;
				color: #292929;
			}
			
			&-integral {
				font-size: 40rpx;
				color: #C07C07;
			}
		}
		
		&-distance {
			position: absolute;
			left: 30rpx;
			right: 30rpx;
			bottom: 35rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			
			&-text {
				font-size: 26rpx;
				color: #292929;
			}
			
			&-button {
				padding: 0 30rpx;
				height: 60rpx;
			}
		}
	}
	
	.info-content-jh{
		padding: 30rpx 50rpx 0 50rpx;
		    margin-bottom: 50rpx;
		    display: flex;
		    flex-direction: row;
		    align-items: center;
			
	}
	
		
	.info-content-jh input{
		margin-top: 20rpx;
		border-bottom: 1px #A5A3A2 solid;
		width: 600rpx;
		padding-bottom: 10rpx;
		
	}
	/**/
	.privilege {
		padding: 0 30rpx;
		margin-bottom: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		//justify-content: space-around;
		flex-wrap: wrap;
		margin-top: 50rpx;
		
		&-item {

			
			display: flex;
			flex-direction: column;
			align-items: center;
			
			width: 30%;
			margin: 0;
			margin-bottom: 30px;
			
			&-pic {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}
			
			&-text {
				font-size: 24rpx;
				color: #383738;
			}
			&-info {
				font-size: 20rpx;
				color: #9c9c9c;
			}
		}
	}
	.code-img{
		width: 40%;
		    height: 300rpx;
		    height: 300rpx;
		    margin: auto;
		    margin-top: 40rpx;
		    padding: 15rpx;
		    border: 1px #9c9c9c solid;
	}
	.code-bom{
		color: #000;
		    font-size: 23rpx;
		    
		    margin: auto;
		    letter-spacing: 5px;
		    margin: 20px auto;
	}
	.wxcode{
		    margin: auto;
		        /* margin-top: 50rpx; */
		        display: flex;
		        justify-content: center;
		        align-items: center;
		        flex-direction: row;
		        width: 90%;
		        background: #efefef;
		        height: 70rpx;
		        border-radius: 10rpx;
			
	}
	.wxcode>text:nth-child(3){
			background-color: #dbf6fe;
			color: #65c4e2;
		    border-radius: 50rpx;
		    font-size: 20rpx;
		    padding: 5rpx 20rpx;
			margin-left: 20rpx;
	}
	.qr-bom{
			color: #9c9c9c;
		    font-size: 23rpx;
		    
		    margin: auto;
		    
		    margin: 20px auto;
	}
	
</style>
